<template>
  <div>
    <h1>文章列表</h1>
    <div class="btn-group mb-2">
      <ElButton
        size="small"
        plain
        @click="[(visDialogType = 'add'), (visviableDialog = true), (formData = { meta: {}, parent_id: 0 })]"
      >
        添加文章
      </ElButton>
    </div>
    <el-table :data="rows" style="width: 100%">
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="title" label="文章标题" width="180" />
      <el-table-column prop="author" label="作者" />
      <el-table-column prop="tag" label="标签" />
      <ElTableColumn prop="status" label="路由状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </ElTableColumn>
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column prop="updatedAt" label="更新时间" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="{ row }">
          <el-button type="info" size="small" @click="handLook(row.id)">查看文章内容</el-button>
          <el-button
            type="primary"
            size="small"
            @click="[(visDialogType = 'edit'), (visviableDialog = true), (formData = row), (formData.content = editor)]"
          >
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="deleteActicle(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <ElPagination
      :current-page="pageData.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
      class="mt-3 float-right"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    ></ElPagination>

    <!--    查看文章弹出层-->
    <el-dialog v-model="lookMask" title="文章内容" width="30%">
      <span v-html="content"></span>
    </el-dialog>

    <!--    添加编辑弹出层-->
    <ElDialog
      v-model="visviableDialog"
      :title="visDialogType == 'add' ? '添加路由' : '编辑路由'"
      :fullscreen="true"
      :show-close="false"
    >
      <!--     eslint-disable-next-line vue/no-unused-vars -->
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            {{ visDialogType == 'add' ? '添加文章' : '编辑文章' }}
          </h4>
          <el-button type="danger" @click="visviableDialog = false">
            <el-icon class="el-icon--left">
              <CircleCloseFilled />
            </el-icon>
            Close
          </el-button>
        </div>
      </template>
      <ElForm v-model="formData" :model="formData" :rules="rules" label-width="80px">
        <ElFormItem label="文章标题" prop="title">
          <ElInput v-model="formData.title" placeholder="请输入文章标题"></ElInput>
        </ElFormItem>

        <ElFormItem label="文章作者" prop="author">
          <ElInput v-model="formData.author" placeholder="请输入文章作者"></ElInput>
        </ElFormItem>

        <ElFormItem label="简介信息" prop="introduction">
          <ElInput v-model="formData.introduction" placeholder="请输入简介信息"></ElInput>
        </ElFormItem>

        <ElFormItem label="文章状态" prop="status">
          <ElRadioGroup v-model="formData.status">
            <ElRadioButton label="0">禁用</ElRadioButton>
            <ElRadioButton label="1">正常</ElRadioButton>
          </ElRadioGroup>
        </ElFormItem>

        <ElFormItem label="文章封面" prop="cover">
          <ElUpload
            class="upload-demo"
            action="http://nodeseq.srliforever.ltd/upload/files"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <ElButton size="small" type="primary">点击上传</ElButton>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </ElUpload>
        </ElFormItem>

        <ElFormItem label="文章内容" prop="content">
          <wangEditor v-model="editor" />
        </ElFormItem>
      </ElForm>
      <!-- 确认提交 -->
      <template #footer>
        <ElButton @click="visviableDialog = false">取消</ElButton>
        <ElButton type="primary" @click="submit">提交</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup>
import article from '@/composables/Api/article'
import wangEditor from '@/components/wangEditor/index.vue'

const articleApi = article()
const lookMask = ref(false)
const rows = ref([])
const content = ref()
//获取文章列表
const getLists = () => {
  articleApi.getArticleList().then((res) => {
    // console.log(res, 'res')
    rows.value = res.rows
    // console.log(rows.value, 'rows')
  })
}
getLists()

//分页
const pageData = ref({
  list: [],
  total: 0,
  page: 1,
  pageSize: 10,
  loadingTable: false
})
const sizeChange = (val) => {
  pageData.value.pageSize = val
  getLists()
}
const currentChange = (val) => {
  pageData.value.page = val
  getLists()
}

//查看文章内容弹出层
const handLook = (id) => {
  // console.log(row.id, 'row')
  lookMask.value = true
  articleApi.getArticleDetail({ id: id }).then((res) => {
    // console.log(res, 'res')
    content.value = res.content
  })
}
//删除文章
const deleteActicle = (id) => {
  // console.log(id, 'id')
  articleApi.deleteArticle({ id: id }).then((res) => {
    // console.log(res, 'res')
    getLists()
  })
}

//添加/编辑弹出层
const visDialogType = ref('add')
const visviableDialog = ref(false)
const rules = ref()
const formData = ref({
  content: ''
})
const editor = ref()
//上传文章封面
const fileList = ref([])
const handleRemove = (file, fileList) => {
  console.log(file, fileList)
}
const handlePreview = (file) => {
  console.log(file)
}

// eslint-disable-next-line no-unused-vars
const beforeRemove = (file, fileList) => {
  return this.$confirm(`确定移除 ${file.name}？`)
}
const handleExceed = (files, fileList) => {
  this.$message.warning(
    `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
  )
}

//确认提交
const submit = () => {
  formData.value.content = editor.value
  console.log(formData.value, 'formData')
  // console.log(formData.value, 'formData')
  if (visDialogType.value == 'add') {
    articleApi.addArticle(formData.value).then((res) => {
      // console.log(res, 'res')
      getLists()
      visviableDialog.value = false
      editor.value = ''
    })
  } else {
    articleApi.editArticle(formData.value).then((res) => {
      // console.log(res, 'res')
      getLists()
      visviableDialog.value = false
      editor.value = ''
    })
  }
}
</script>

<style lang="scss" scoped>
.my-header {
  //显示在页面最右侧
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
</style>
